<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Pet Activity</title>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/home.css}" rel="stylesheet">
  </head>

  <body style="background-color: #ffffcc">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Pet Platform</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="/api/home">HomeBanner

              </a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="/api/activity">PetActivity<span class="sr-only">(current)</span></a>
            </li>


            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span th:text="${session.adminEmail}">...</span>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="/logout">Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">

      <div class="row">

        <div class="col-lg-3">

          <h1 class="my-4">Admin</h1>

          <img style="width:200px" th:src="@{/img/1.png}" />
          <img style="margin-top:10px;width:200px" th:src="@{/img/2.png}" />


        </div>
        <!-- /.col-lg-3 -->
        <div class="col-lg-9">
          <div style="margin-top: 50px">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h2 class="panel-title">
                  Manage Activity
                </h2>
              </div>
              <div class="panel-body">
                <table class="table">
                  <thead>
                  <tr>
                    <th scope="col">id</th>
                    <th scope="col">title</th>
                    <th scope="col">description</th>
                    <th scope="col">picture</th>
                    <th scope="col">time</th>
                    <th scope="col">location</th>
                    <th scope="col">Actions</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr th:each="activity : ${activities}">
                    <th th:text="${activity.id}"/>
                    <td th:text="${activity.title}"/>
                    <td th:text="${activity.desctxt}"/>
                    <td><a target="_blank" th:href="@{'/uploadfile/'+${activity.pic}}">View</a></td>
                    <td th:text="${#dates.format(activity.acttime,'yyyy-MM-dd HH:mm')}"  />
                    <td th:text="${activity.location}"/>
                    <td>
                      <button class="edit btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</button>
                      <button class="delete btn btn-primary">Delete</button>
                      <a class="btn btn-primary" th:href="@{'/api/actEnroll?id='+${activity.id}}">Participants </a>
                    </td>
                  </tr>

                  </tbody>
                </table>
                <button id="addBt" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add an Activity</button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Edit Activity</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      </div>
                      <form action="/editact" enctype="multipart/form-data" method="POST">
                      <div class="modal-body">
                         <input type="hidden" name="id" id="id_edit"/>
                         <input type="text" class="form-control" name="title" id="title_edit" placeholder="title">
                        <br>
                        <input type="text" class="form-control" name="desc" id="desc_edit" placeholder="description">
                        <br>
                        <input type="file" class="form-control" name="pic" id="file_edit" >
                        <br>
                        <input type="text" class="form-control" name="time" id="time_edit" placeholder="time">
                        <br>
                        <input type="text" class="form-control" name="location" id="location_edit" placeholder="location">
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="confirm_edit">Confirm</button>
                         </div>
                      </form>
                    </div>
                  </div>
                </div>

                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title" id="myLabel">Add Activity</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      </div>
                      <form action="/addact" enctype="multipart/form-data" method="POST">
                      <div class="modal-body">
                        <input type="text" class="form-control" name="title" id="title_add" placeholder="title">
                        <br>
                        <input type="text" class="form-control" name="desc" id="desc_add" placeholder="description">
                        <br>
                        <input type="file" class="form-control" name="pic" id="file_add" >
                        <br>
                        <input type="text" class="form-control" name="time" id="time_add" placeholder="time">
                        <br>
                        <input type="text" class="form-control" name="location" id="location_add" placeholder="location">
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="confirm_add">Confirm</button>
                      </div>
                      </form>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <!-- /.col-lg-9 -->

      </div>
      <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Pet Website 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script th:src="@{/jquery/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

    <script th:inline="javascript">

        $(".edit").click(function(event){
            var id = $(event.target).parent().prev().prev().prev().prev().prev().prev().html();
            var title = $(event.target).parent().prev().prev().prev().prev().prev().html();
            var descTxt = $(event.target).parent().prev().prev().prev().prev().html();
            var acttime = $(event.target).parent().prev().prev().html();
            var location = $(event.target).parent().prev().html();
            $("#id_edit").val(id);
            $("#title_edit").val(title);
            $("#desc_edit").val(descTxt);
            $("#time_edit").val(acttime);
            $("#location_edit").val(location);
        });
        $(".delete").click(function(event){
            var id = $(event.target).parent().prev().prev().prev().prev().prev().prev().html();
            $.ajax({
                type:"POST",
                url:"/deleteact",
                data:{id:id},
                datatype: "json",
                success:function(data){
                    if(data=='OK'){
                        window.location = "/api/activity";
                    }else{
                        console.log(data)
                        alert("delete activity failed!");
                    }

                },

                error: function(){
                    alert("delete activity failed!");
                }
            });
        });

    </script>
  </body>

</html>
